<template>
  count:{{ count }}{{ $store.state.count }}
  <br />
  double:{{ double }}{{ $store.getters.double }}
  <br />

  <!-- 严格模式下直接修改state的值会报错 -->
  <button @click="$store.state.count++">vuex4严格模式下报错</button>

  <!-- 同步修改 -->
  <button @click="add">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAdd">异步修改</button>

  <br />
  aCount:{{ aCount }}{{ $store.state.aCount.count }}
  <br />
  aDouble:{{ aDouble }}{{ $store.getters["aCount/double"] }}
  <br />

  <!-- 同步修改 -->
  <button @click="addACount">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAddACount">异步修改</button>
  <br />
  bCount:{{ bCount }}{{ $store.state.bCount.count }}
  <br />
  bDouble:{{ bDouble }}{{ $store.getters["bCount/double"] }}
  <br />
  <!-- 同步修改 -->
  <button @click="addBcount">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAddBcount">异步修改</button>
  <br />
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "App",
  setup() {
    const store = useStore("my");

    console.log(store);

    const add = () => {
      store.commit("add", 1);
    };

    const asyncAdd = () => {
      store.dispatch("asyncAdd", 1);
    };

    const addACount = () => {
      store.commit("aCount/add", 1);
    };

    const asyncAddACount = () => {
      store.dispatch("aCount/asyncAdd", 1);
    };

    const addBcount = () => {
      store.commit("bCount/add", 1);
    };

    const asyncAddBcount = () => {
      store.dispatch("bCount/asyncAdd", 1);
    };

    return {
      // 不使用computed包裹，那么将不会具有响应式
      count: computed(() => store.state.count),
      double: computed(() => store.getters.double),
      aCount: computed(() => store.state.aCount.count),
      aDouble: computed(() => store.getters["aCount/double"]),
      bCount: computed(() => store.state.bCount.count),
      bDouble: computed(() => store.getters["bCount/double"]),
      add,
      asyncAdd,
      addACount,
      asyncAddACount,
      addBcount,
      asyncAddBcount,
    };
  },
};
</script>
